
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../avalon.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css" />

        <script>
            var model = avalon.define("ooo", function(vm) {
                vm.options = ["aaa", "bbb", "ccc", "ddd"]
                //动态更新widget中的数据
                vm.callback = function() {
                    var second = avalon.vmodels.second
                    if (second) {
                        second.resetOptions()
                    }
                }
            })

            setTimeout(function() {
                //动态更新原select中的数据
                model.options.push("eee", "fff", "ggg")
                avalon.vmodels.second.select(1)//动态改变选项
                avalon.vmodels.second.select(2)
            }, 3000)
            require("avalon.select", function() {
                avalon.scan()
            })/*
             avalon.define("second", function(vm){
                vm.$skipArray = ["opts"]
                vm.opts = {
                    onChange: function(){}
                }
             })
             */
        </script>

    </head>
    <body>
        <div>
            <select title="Basic example" multiple="multiple" name="example-basic" size="5" ms-widget="select" >
                <option value="option2">Option 2</option>
                <option value="option1">Option 1</option>
                <option value="option3">Option 3</option>
                <option value="option4">Option 4</option>
                <option value="option5">Option 5</option>
                <option value="option6" selected>Option 6</option>
                <option value="option7" selected>Option 7</option>
                <option value="option8">Option 8</option>
                <option value="option9">Option 9</option>
                <option value="option10">Option 10</option>
                <option value="option11">Option 11</option>
                <option value="option12">Option 12</option>
            </select>

            <select title="Basic example" multiple="multiple" name="example-basic" size="5" ms-widget="select,second" ms-controller="ooo" ms-each="options" data-each-rendered="callback">
                <option>{{el}}</option>
            </select>

            <select name="example-optgroup" multiple="multiple" size="5" ms-widget="select">
                <optgroup label="Group One">
                    <option value="option1">Option 1</option>
                    <option value="option2">Option 2</option>
                    <option value="option3">Option 3</option>
                </optgroup>
                <optgroup label="Group Two">
                    <option value="option4">Option 4</option>
                    <option value="option5">Option 5</option>
                    <option value="option6">Option 6</option>
                    <option value="option7">Option 7</option>
                </optgroup>
            </select>

            <select name="demo" ms-widget="select">
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option3">Option 3</option>
                <option value="option4">Option 4</option>
                <option value="option5">Option 5</option>
                <option value="option6">Option 6</option>
                <option value="option7">Option 7</option>
            </select>

            <select multiple="multiple" size="5" ms-widget="select">
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option3" disabled>Option 3</option>
                <option value="option4">Option 4</option>
                <option value="option5">Option 5</option>
            </select>
        </div>

    </body>
</html>
